<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="./plugins/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css" />  
	<script type="text/javascript" src=<?php  print("\"./themes/" . $cur_theme . "/js/jquery.min.js\""); ?>></script>
    <script type="text/javascript" charset="utf-8" src="./plugins/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="./plugins/ueditor/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="./plugins/ueditor/lang/zh-cn/zh-cn.js"></script>
	<script type="text/javascript" src="./plugins/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
	<style type="text/css"> 
	body{color:#555;font-size:14px;padding:0;margin:0;}
	#form_editor { background: #dedede; width: 1152px; margin: auto; padding-top: 0px; padding-bottom: 0px;}
	#form_header { width: 1150px;height: auto;margin-left:0px;margin-right:0px;border: solid black 1px;padding: 0px;}
	#content { width: 1150px;height:150px;margin: 0;padding:0px; resize: none; border: 0px;}
	#form_footer { width: 1150px;height: auto;margin-left:0px;margin-right:0px;border: solid black 1px;padding: 0px;overflow: hidden;}
	#right_footer {float:right;}
	#left_footer {float:left;}
	#wrap_comments{margin: auto;padding: 0;width:1152px;};
	.cls_wrap_comments { background: #dedede; width: 1152px; margin: auto; padding-top: 16px; padding-bottom: 16px;}
	.cls_wrap_comments_table { background: yellow; width: 1152px; margin: 0px; padding: 0px; border: 0px;border-collapse:collapse;border: solid black 1px;table-layout: fixed;}
	.cls_wrap_avatar {background: lightblue;width: 190px;height: auto;border: solid black 1px;vertical-align:top;text-align:center;}
	.cls_wrap_floor {background: yellow; width: 800px;height: 24px;border: solid black 1px;overflow:hidden;}
	.cls_wrap_comment {background: white; width: 800px;height: auto;border: solid black 1px;word-wrap:break-word;word-break:break-all;overflow:hidden;padding: 16px;}
	.cls_wrap_ctrlpannel {background: silver; width: 800px;height: 24px;border: solid black 1px;overflow:hidden;}
	#page_navigation {
		margin: auto;
		padding: 0;
		width:1152px;
		padding-top: 16px;
		padding-bottom: 16px;
		text-align: center;
	}
	#page_navigation a{
		padding:3px;
		border:1px solid gray;
		margin:2px;
		color:black;
		text-decoration:none
	}
	.active_page{
		background:darkblue;
		color:white !important;
	}
	</style>
	<title>评论页面：</title>
  </head> 
  <body>
	<div style="width:1152px;background:#dedede;color:GREEN;margin:auto;padding:0;text-align:center;font-size:24px;font-weight:700;padding-top:16px;padding-bottom:16px;">
	  讨论区郑重提醒您： 您已不小心进入雷区，小心误伤！
	</div>
	<div id="form_editor">
	  <form action="add_comment.php" method="get" id="suggest_form">
		<div id="form_header">
		  <script id="editor" type="text/plain" style="width:100%;height:150px;"></script>
		  <input type="hidden" name="content" id="content">
		</div>
		<div id="form_footer">
		  <div id="left_footer">
			用户名：<input readonly type="text" name="username" id="username" value="<?php print($username); ?>" />
			<input type="hidden" name="aid" id="aid" value="<?php print($s_aid); ?>" />
		  </div>
		  <div id="right_footer">
			<input type="button" value="我也要说" id="btn_sub" />
		  </div>
		</div>
	  </form> 
	</div>

	<script type="text/javascript">
	  SyntaxHighlighter.all();
	// -------------------------------------------------------------------------------
	$(document).ready(function(){
		var show_per_page = 5; 
		var number_of_items = $('#wrap_comments').children().size();
		var number_of_pages = Math.ceil(number_of_items/show_per_page);
		$('#current_page').val(0);
		$('#show_per_page').val(show_per_page);
		var navigation_html = '<a class="previous_link" href="javascript:previous();">上一页</a>';
	  var current_link = 0;
	  while(number_of_pages > current_link){
			navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
			current_link++;
	  }
	  navigation_html += '<a class="next_link" href="javascript:next();">下一页</a>';
	  navigation_html += '<a style="color:red;background:yellow;" onclick="goto_editor();" href="">忍不住再说几句！</a>';
	  
		$('#page_navigation').html(navigation_html);
		$('#page_navigation .page_link:first').addClass('active_page');
		$('#wrap_comments').children().css('display', 'none');
		$('#wrap_comments').children().slice(0, show_per_page).css('display', 'block');	
	});

	  function goto_editor()
	  {
	  document.getElementByIdx('editor').scrollIntoView();
	  }
	  
	function previous(){
		new_page = parseInt($('#current_page').val()) - 1;
		if($('.active_page').prev('.page_link').length==true){
			go_to_page(new_page);
		}
	}
	function next(){
		new_page = parseInt($('#current_page').val()) + 1;
		if($('.active_page').next('.page_link').length==true){
			go_to_page(new_page);
		}
	}
	function go_to_page(page_num){
		var show_per_page = parseInt($('#show_per_page').val());
		start_from = page_num * show_per_page;
		end_on = start_from + show_per_page;
		$('#wrap_comments').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
		$('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');
		$('#current_page').val(page_num);
	}
	//===========================================================================================
	// 创建主编辑器
	var ue = UE.getEditor('editor',{
		initialFrameWidth :1148,//设置编辑器宽度
		initialFrameHeight:150,//设置编辑器高度
		scaleEnabled:false
	});

	// 编辑器表单提交
	$(function(){ 
		$("#btn_sub").click(function(){
			document.getElementById("content").value = ue.getContent();
			$.post("./add_comment.php",{id : $("#aid").val(), content : $("#content").val()}, function(data){
				if(data.errno == 0){
					var s_comment = "";
					s_comment += "<div class=\"cls_wrap_comments\">";
					s_comment += "<table class=\"cls_wrap_comments_table\">";
					s_comment += "<tr>																			    ";
					s_comment += "	<td rowspan=3 class=\"cls_wrap_avatar\">										";
					s_comment += "	<div style=“padding-top:64px;”>													";
					s_comment += "	  <br/>																			";
					s_comment += "	  <br/>																			";
					s_comment += "	  <img width=\"128\" height=\"128\" src=\"" + data.avatar+ "\" />				";
					s_comment += "	</div>																			";
					s_comment += "	<div style=\"padding-top:16px;padding-bottom:16px;\">							";
					s_comment += "	  " + data.username + "													";
					s_comment += "	</div>																			";
					s_comment += "	</td>																			";
					s_comment += "	<td class=\"cls_wrap_floor\">													";
					s_comment += "	<div style=\"float: left;color: black;\">										";
					s_comment += "	  评论时间： " + data.maketime +"												";
					s_comment += "	</div>																			";
					s_comment += "	<div style=\"float: right;color: black;\">										";
					s_comment += "	  新的楼层      																	";
					s_comment += "	</div>																			";
					s_comment += "	</td>																			";
					s_comment += "</tr>																				";
					s_comment += "<tr>																				";
					s_comment += "	<td class=\"cls_wrap_comment\">													";
					s_comment += data.content;
					s_comment += "	</td>																			";
					s_comment += "</tr>																				";
					s_comment += "<tr>																				";
					s_comment += "	<td class=\"cls_wrap_ctrlpannel\">												";
					s_comment += "	<div style=\"float: left;color: black;\">										";
					s_comment += "	 <a href=\"./alert.php?t=c&id=" + data.cid + "\" target=\"_blank\" > 举报</a>	";
					s_comment += "	</div>																			";
					s_comment += "	<div style=\"float: right;color: black;\">										";
					s_comment += "	  支持(1152次)&nbsp;&nbsp;&nbsp;&nbsp; 反对(128次)&nbsp;&nbsp;    ";
					s_comment += "	</div>																			";
					s_comment += "	</td>																			";
					s_comment += "</tr>																				";
					s_comment += "</table>"
					s_comment += "</div>"
					$("#wrap_comments").prepend(s_comment); //在前面追加 
				} else if (data.errno == -1) {
					alert("文章ID为空！");
				} else if (data.errno == -2) {
					alert("当前尚未登录！");
				} else if (data.errno == -3) {
					alert("文章内容为空！");
				} else {
					alert("失败！");
				}
			}, 'json'); 
		});   
	});
	
	</script>
	
	<input type='hidden' id='current_page' />
	<input type='hidden' id='show_per_page' />	
	<div id='wrap_comments'>
		<?php
		$s_html_comment = "";$rowno = 0;$s_rowno = '0';
		foreach ($comments as $comment) {
			$rowno += 1;$s_rowno = strval($rowno);
			$s_html_comment = <<< EOT
			<div class="cls_wrap_comments">
			
			<table class="cls_wrap_comments_table">
			<tr>
			<td rowspan=3 class="cls_wrap_avatar">
			<div style=“padding-top:64px;”>
			<br/>
			<br/>
			<img width="128" height="128" src="{$comment['avatar']}" />
			</div>
			<div style="padding-top:16px;padding-bottom:16px;">
			{$comment['username']}
			</div>
			</td>
			<td class="cls_wrap_floor">
			<div style="float: left;color: black;">
			评论时间： {$comment['maketime']}
			</div>
			<div style="float: right;color: black;">
			楼层：第&nbsp;{$s_rowno}&nbsp;层
			</div>
			</td>
			</tr>
			<tr>
			<td class="cls_wrap_comment">
			{$comment['content']}
			</td>
			</tr>
			<tr>
			<td class="cls_wrap_ctrlpannel">
			<div style="float: left;color: black;">
			<a href="./alert.php?t=c&id={$comment['guid']}" target="_blank" > 举报</a>
			</div>
			<div style="float: right;color: black;">
			支持(1152次)&nbsp;&nbsp;&nbsp;&nbsp; 反对(128次)&nbsp;&nbsp;&nbsp;&nbsp; 回复
			</div>
			</td>
			</tr>
			</table>
			
			</div>
EOT;
			print("{$s_html_comment}");
		}
		?>
	</div>
	<div id='page_navigation' style="visibility:visible;"></div>
  </body> 
</html> 
